<!-- Bootstrap pricing -->
<section id="social-cards">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Bootstrap Pricing</h4>
            <p>Quickly build an effective pricing table for your potential customers with this Bootstrap example. It's built with default Bootstrap components and utilities with little customization.</p>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold">Free</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>10 users included</li>
			              <li>2 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-outline-info">Sign up for free</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold">Pro</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>20 users included</li>
			              <li>10 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-info">Get started</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold">Enterprise</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>30 users included</li>
			              <li>15 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-info">Contact us</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Bootstrap pricing section end -->

<!-- Bootstrap pricing Out Line Button -->
<section id="social-cards">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Bootstrap Pricing With Warning Out Line Button</h4>
            <p>For outline button add class <code>btn-outline-warning</code></p>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold">Free</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>10 users included</li>
			              <li>2 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-outline-warning">Sign up for free</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold">Pro</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>20 users included</li>
			              <li>10 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-outline-warning">Get started</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold">Enterprise</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>30 users included</li>
			              <li>15 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-outline-warning">Contact us</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Bootstrap pricing Outline Button section end -->

<!-- Bootstrap pricing With Text And Button Success Color -->
<section id="social-cards">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Bootstrap Pricing With Text And Button Success Color</h4>
            <p>for text color chnage add class <code>.success</code> and for button color chnage add class in button <code>.btn-success</code></p>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold success">Free</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>10 users included</li>
			              <li>2 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-success">Sign up for free</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold success">Pro</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>20 users included</li>
			              <li>10 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-success">Get started</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold success">Enterprise</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>30 users included</li>
			              <li>15 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-success">Contact us</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Bootstrap pricing With Text And Button Success Color section end -->

<!-- Bootstrap pricing with glow button -->
<section id="social-cards">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Bootstrap Pricing With Glow Button</h4>
            <p>For glow button add class in button <code>.btn-glow</code></p>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold danger">Free</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>10 users included</li>
			              <li>2 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-danger btn-glow">Sign up for free</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold danger">Pro</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>20 users included</li>
			              <li>10 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-danger btn-glow">Get started</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold danger">Enterprise</h2>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>30 users included</li>
			              <li>15 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-danger btn-glow">Contact us</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Bootstrap pricing with glow button section end -->

<!-- Bootstrap pricing with full with button -->
<section id="social-cards">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Bootstrap Pricing With Full Button</h4>
            <p>Cards has no padding Add <code>.p-0</code> for button aquare just Add<code>.square</code></p>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-xl-4 col-md-6 col-12">
          	<div class="card box-shadow">
            	<div class="card-body text-center rounded p-0 pt-2">
                    <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold">Free</h2>
			        </div>
			        <div class="card-body">
			            <h1 class="pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>10 users included</li>
			              <li>2 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			        </div>
                	<button type="button" class="btn btn-primary btn-block text-uppercase p-1 square">Sign up for free</button>
              	</div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
          	<div class="card box-shadow">
            	<div class="card-body text-center rounded p-0 pt-2">
                    <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold">Pro</h2>
			        </div>
			        <div class="card-body">
			            <h1 class="pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>20 users included</li>
			              <li>10 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			        </div>
                	<button type="button" class="btn btn-primary btn-block text-uppercase p-1 square">Get started</button>
              	</div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
          	<div class="card box-shadow">
            	<div class="card-body text-center rounded p-0 pt-2">
                    <div class="card-header pb-0">
			            <h2 class="my-0 font-weight-bold">Enterprise</h2>
			        </div>
			        <div class="card-body">
			            <h1 class="pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>30 users included</li>
			              <li>15 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			        </div>
                	<button type="button" class="btn btn-primary btn-block text-uppercase p-1 square">Contect us</button>
              	</div>
            </div>
        </div>
    </div>
</section>
<!-- // Bootstrap pricing with full width button -->

<!-- Bootstrap pricing -->
<section id="social-cards">
    <div class="row">
        <div class="col-12 mt-3 mb-1">
            <h4 class="text-uppercase">Bootstrap Pricing With Heading Background Color</h4>
            <p>For header backgound color Add class in card-header<code>.bg-info, .bg-amber, .bg-danger</code> and for button just add class in button <code>.square</code></p>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header bg-info">
			            <h3 class="my-0 font-weight-bold text-white">Free</h3>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$0 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>10 users included</li>
			              <li>2 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-info btn-glow">Sign up for free</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header bg-warning">
			            <h3 class="my-0 font-weight-bold text-white">Pro</h3>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$15 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>20 users included</li>
			              <li>10 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-warning btn-glow">Get started</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
        <div class="col-xl-4 col-md-6 col-12">
            <div class="card profile-card-with-cover">
                <div class="card-content card-deck text-center">
			        <div class="card box-shadow">
			          <div class="card-header bg-danger">
			            <h3 class="my-0 font-weight-bold text-white">Enterprise</h3>
			          </div>
			          <div class="card-body">
			            <h1 class="pricing-card-title">$29 <small class="text-muted">/ mo</small></h1>
			            <ul class="list-unstyled mt-2 mb-2">
			              <li>30 users included</li>
			              <li>15 GB of storage</li>
			              <li>Email support</li>
			              <li>Help center access</li>
			            </ul>
			            <button type="button" class="btn btn-lg btn-block btn-danger btn-glow">Contact us</button>
			          </div>
			        </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- // Bootstrap pricing section end -->